<template>
  <div class="weldbox-map-content">
    <div id="weldbox-map">
      <map-toolbar 
        :webmoduleId="61"
        :filter-options="{
          flat: true,
          excludeCommands: ['setlink', 'choseData', 'choseData2', 'beforeView', 'afterView']
        }"
        @command="handleToolbarCommand"
      />
    </div>
    <!-- 批量连线弹框 -->
    <div v-if="batchDialogVisible" class="weldbox-batch-dialog" v-dialog-drag>
      <div class="dialog-header">
        <span>批量连线</span>
        <i class="el-icon-close" @click="batchDialogVisible = false"></i>
      </div>
      <div class="dialog-body">
        <div style="margin-bottom: 15px;">
          <el-radio-group v-model="isBatchAll">
            <el-radio :label="true">全部熔接</el-radio>
            <el-radio :label="false">指定数量</el-radio>
          </el-radio-group>
        </div>
        <el-input-number 
          v-if="!isBatchAll"
          v-model="batchCount" 
          :min="1" 
          :max="maxBatchCount" 
          style="width: 100%"
        />
        <div style="margin-top: 15px; color: #999;">
          最多可熔接 {{ maxBatchCount }} 条
        </div>
      </div>
      <div class="dialog-footer">
        <el-button @click="batchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchWeld">确定</el-button>
      </div>
    </div>
    <!-- 批量删除弹框 -->
    <div v-if="batchDeleteDialogVisible" class="weldbox-batch-dialog" v-dialog-drag>
      <div class="dialog-header">
        <span>批量删除</span>
        <i class="el-icon-close" @click="batchDeleteDialogVisible = false"></i>
      </div>
      <div class="dialog-body">
        <div style="margin-bottom: 15px;">
          <el-radio-group v-model="isBatchDeleteAll">
            <el-radio :label="true">全部删除</el-radio>
            <el-radio :label="false">指定数量</el-radio>
          </el-radio-group>
        </div>
        <el-input-number 
          v-if="!isBatchDeleteAll"
          v-model="batchDeleteCount" 
          :min="1" 
          :max="maxBatchDeleteCount" 
          style="width: 100%"
        />
        <div style="margin-top: 15px; color: #999;">
          最多可删除 {{ maxBatchDeleteCount }} 条
        </div>
      </div>
      <div class="dialog-footer">
        <el-button @click="batchDeleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchDelete">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import L from '@/libs/leaflet'
import { get } from 'lodash'
import MapToolbar from '../home/components/mapTools.vue'
import { getSysMapInfoApi, getLayerManagerInfoApi } from '@/deps/api'
import { createWeldboxLinkLineApi, deleteBatchWeldboxLinkLineApi, createBatchWeldboxLinkLineApi } from '@/deps/apis/weldboxApi'
import { sessionStorage } from '@/deps/utils'
import {
  mapService,
  createLayerManager,
  spColorToGeneral
} from '@/widgets/mapUtils'
let featuresDatas = []
let sysMapInfo = null
let weldboxMapObj = null
let drawingPoints = []
let tempLine = null
let notifyInstance = null
let messageInstance = null
let connections = []  // 存储所有连线

export default {
  name: 'WeldBox',

  components: {
    MapToolbar
  },

  data() {
    return {
      featureData: null,
      crsConfig: null,
      isDrawingLine: false,
      selectedConnection: null,  // 移回到 data 中
      mapConfig: {
        MapCRSType: 0,
        MapZoom: 12,
        BoundsLeftBottom: '',
        BoundsRightTop: '',
        MapOrigin: ''
      },
      selectedInnerLine: null,
      batchDialogVisible: false,
      batchCount: 0,
      maxBatchCount: 0,
      isBatchAll: false,
      batchDeleteDialogVisible: false,
      batchDeleteCount: 1,
      maxBatchDeleteCount: 0,
      isBatchDeleteAll: false
    }
  },

  computed: {
    // 判断是否可以删除熔接
    canDeleteWeld() {
      return this.selectedConnection !== null
    }
  },

  async created() {
    window.addEventListener('beforeunload', this.handleBeforeUnload)
    // 从 sessionStorage 获取 featureData
    const featureData = sessionStorage('weldbox_feature')
    if (featureData) {
      this.featureData = featureData
    }
    console.log('featureData', featureData)
  },

  async mounted() {
    sysMapInfo = await getSysMapInfoApi({webmoduleId: 61, rootClassType: 2})
    console.error(sysMapInfo, 'sysMapInfo')
    try {
      // 直接使用导入的 SuperMap
      const mapInfo = await new Promise((resolve, reject) => {
        mapService.getMapInfo((serviceResult) => {
          if (serviceResult.error) {
            reject(serviceResult.error)
          } else {
            resolve(serviceResult.result)
            this.initMap(mapInfo)
          }
        })
      })
      weldboxMapObj.on('moveend', this.afterMoveend)
      console.log('地图服务信息:', mapInfo)
    } catch (error) {
      console.error('获取地图服务信息失败:', error)
    }
  },

  methods: {
    handleBeforeUnload(e) {
      e.preventDefault()
      e.returnValue = '刷新页面将返回网络资源页面'
      return e.returnValue
    },
    afterMoveend() {
      console.log('地图移动结束')
      this.layerManager && this.layerManager.clearLayers()
      this.layerOnMapByFeatures()
    },
    async layerOnMapByFeatures() {
      try {
        if (!featuresDatas || featuresDatas.length === 0) {
          const data = {
            menuid: '680',
            rootClassType: 2
          }
          const res = await getLayerManagerInfoApi(data)
          if (res && Array.isArray(res)) {
            featuresDatas = res.reduce((acc, item) => {
              if (item.child && Array.isArray(item.child)) {
                acc.push(...item.child)
              }
              return acc
            }, [])
          }
        }
        console.log('图层数据:', featuresDatas)
        // 创建图层管理器实例并保存到组件实例
        if (!this.layerManager) {
          this.layerManager = createLayerManager(weldboxMapObj)
        }
        // 加载图层，传入当前选中的 featureData
        await this.layerManager.loadMaps(featuresDatas, this.featureData)

        // 在图层加载完成后绑定点击事件
        if (this.layerManager.dataFeatureGroup) {
          // 定义局部变量存储连接关系
          let fiberConnections = [];
          this.layerManager.dataFeatureGroup.eachLayer((layer) => {
            const props = get(layer, 'feature.properties', {});
            const FEATURENAME = props.FEATURENAME || '';
            // 记录连线关系
            if (FEATURENAME === '熔接连线') {
              const beforeId = props.BEFOREFIBERID;
              const afterId = props.AFTERFIBERID;
              fiberConnections = fiberConnections.concat([beforeId, afterId]);
            }
            // 其他图层的点击事件处理
            layer.on('click', (e) => {
              L.DomEvent.stopPropagation(e);
              // 为所有连线图层添加点击事件
              if (FEATURENAME === '熔接连线') {
                  this.selectConnection(layer);
                  // 自动添加到connections数组
                  const color = get(layer, 'feature.properties.COLOR', 0);
                  connections.push({
                    line: layer,
                    color: spColorToGeneral(color)
                  });
              }
              if (FEATURENAME === '熔接光纤') {
                this.selectedLayer = layer;
                // 如果不在连线状态，不处理
                if (!this.isDrawingLine) {
                  this.showMessage(`请先点击工具栏连线按钮开启连线`)
                  return
                }
                const fiberId = get(layer, 'feature.properties.SMID');
                console.error(layer)
                if (fiberConnections.includes(fiberId)) {
                  this.showMessage(`当前光纤已有连线，请选择其他光纤`)
                  return
                }
                const clickedPoint = e.latlng
                const clickedX = clickedPoint.lng
                // 获取中心线的X坐标（假设地图中心是分界线）
                const mapCenter = weldboxMapObj.getCenter().lng
                // 如果还没有选择点，直接添加第一个点
                if (drawingPoints.length === 0) {
                  drawingPoints.push({
                    latlng: clickedPoint,
                    layer: layer
                  })
                  if (notifyInstance) {
                    notifyInstance.message = '请选择另一侧的光缆子管'
                  }
                  return
                }
                // 判断点击位置是否在已有点的同一侧
                const firstPointX = drawingPoints[0].latlng.lng
                const isFirstLeft = firstPointX < mapCenter
                const isCurrentLeft = clickedX < mapCenter
                const firstLayer = drawingPoints[0].layer;
                const currentLayer = layer;
                const firstLineId = get(firstLayer, 'feature.properties.C_PRO_LINE_ID');
                const currentLineId = get(currentLayer, 'feature.properties.C_PRO_LINE_ID');
                // 如果点击的是同一侧，替换起点
                if (isFirstLeft === isCurrentLeft && firstLineId === currentLineId) {
                  drawingPoints[0] = {
                    latlng: clickedPoint,
                    layer: layer
                  }
                  if (notifyInstance) {
                    notifyInstance.message = '已更新起点，请选择另一侧的光缆子管'
                  }
                  return
                }
                // 添加第二个点
                drawingPoints.push({
                  latlng: clickedPoint,
                  layer: layer
                })
                // 如果已经选择了两个点
                if (drawingPoints.length === 2) {
                  // 移除临时连线
                  if (tempLine && weldboxMapObj.hasLayer(tempLine)) {
                    weldboxMapObj.removeLayer(tempLine)
                  }
                  this.createConnection()
                  // 不清除连线状态，只重置点数组
                  drawingPoints = []
                  // 重置临时线对象，为下一次连线做准备
                  tempLine = null
                  if (notifyInstance) {
                    notifyInstance.message = '连线完成，请继续选择要连接的光缆子管'
                  }
                }
              }
            })
          })
        }
      } catch (err) {
        console.error('获取图层信息失败:', err)
      }
    },
    async initMap(mapInfo) {
      if (weldboxMapObj) {
        weldboxMapObj.remove()
      }
      // 根据要素的坐标范围设置地图边界
      const bounds = L.bounds(
        L.point(0, 0),  // 左下角
        L.point(2000, 2000)  // 右上角，设置一个足够大的范围
      )
      // 设置坐标系
      this.crsConfig = L.CRS.NonEarthCRS({
        bounds: bounds,
        origin: L.point(0, 2000)  // 原点设在左上角
      })
      // 初始化地图
      weldboxMapObj = L.map('weldbox-map', {
        crs: this.crsConfig,
        center: [1200, 1000],  // 设置一个合适的中心点
        zoom: 4,  // 初始缩放级别
        zoomControl: false,  // 禁用默认的缩放控件
        attributionControl: false,
        detectRetina: true,
        maxZoom: 20,
        minZoom: 0
      })
      await this.layerOnMapByFeatures()
    },
    // 准备批量删除
    prepareBatchDelete() {
      if (!this.canDeleteWeld) {
        this.showMessage('请先选择一条熔接连线')
        return
      }

      // 计算当前地图上所有熔接连线的数量
      let lineCount = 0
      if (this.layerManager && this.layerManager.dataFeatureGroup) {
        this.layerManager.dataFeatureGroup.eachLayer(layer => {
          const FEATURENAME = get(layer, 'feature.properties.FEATURENAME', '')
          if (FEATURENAME === 'W_WELD_LINE' || FEATURENAME === '熔接连线') {
            lineCount++
          }
        })
      }

      this.maxBatchDeleteCount = lineCount
      this.batchDeleteCount = this.maxBatchDeleteCount
      this.batchDeleteDialogVisible = true
    },
    // 确认批量删除
    confirmBatchDelete() {
      const count = this.isBatchDeleteAll ? 0 : this.batchDeleteCount
      this.deleteConnection(count)
    },
    // 删除连线方法（支持单个和批量删除）
    async deleteConnection(count = 1) {
      if (!this.selectedConnection) return

      try {
        const params = {
          w_weld_line_id: this.selectedConnection.line.feature.properties.SMID,
          weldcount: count,
          userName: sessionStorage('userData').userName,
          baseinfoid: 1
        }

        const res = await deleteBatchWeldboxLinkLineApi(params)
        if (!res.success) {
          console.error(res)
          this.$message.error(res.message || count > 1 ? '批量删除失败' : '删除失败')
          return
        }

        // 从地图上移除连线
        if (count > 1) {
          // 批量删除：移除所有连线
          connections.forEach(conn => weldboxMapObj.removeLayer(conn.line))
        } else {
          // 单个删除：只移除选中的连线
          weldboxMapObj.removeLayer(this.selectedConnection.line)
        }

        // 移除内层线条
        if (this.selectedInnerLine) {
          weldboxMapObj.removeLayer(this.selectedInnerLine)
          this.selectedInnerLine = null
        }

        // 重置状态
        connections = []
        this.selectedConnection = null
        this.batchDeleteDialogVisible = false

        this.$message.success(count > 1 ? `成功删除 ${count} 条连线` : '删除成功')
        this.$nextTick(async() => {
          // 刷新视图
          await this.layerOnMapByFeatures()
        })
      } catch (error) {
        console.error(count > 1 ? '批量删除失败:' : '删除失败:', error)
        this.$message.error(count > 1 ? '批量删除失败' : '删除失败')
      }
    },
    handleToolbarCommand(command) {
      switch (command) {
        case 'testFreshMap':
          // 重置视图为初始化状态
          this.stopDrawing() // 先停止当前连线状态
          this.layerOnMapByFeatures() // 重新初始化地图
          break
        case 'choseitem':  // 手动熔接
          if (this.isDrawingLine) {
            this.stopDrawing()
          } else {
            this.startDrawing()
          }
          break
        case 'batchweldconnitem':  // 批量熔接
          if (!this.canDeleteWeld) {
            this.showMessage('请先选择一条熔接连线')
            return
          }
          this.prepareBatchWeld()
          break
        case 'deleteconnitem':  // 删除熔接
          if (!this.canDeleteWeld) {
            this.showMessage('请先选择要删除的熔接连线')
            return
          }
          this.deleteConnection()
          break
        case 'batchdeleteweldconnitem':
          this.prepareBatchDelete()
          break
        default:
          break
      }
    },
    // 准备批量熔接
    async prepareBatchWeld() {
      // 确保图层已加载
      if (!this.layerManager || !this.layerManager.dataFeatureGroup) {
        await this.layerOnMapByFeatures()
      }

      const leftFiberLayers = []
      const rightFiberLayers = []
      const lineLayers = []
      const mapCenter = weldboxMapObj.getCenter().lng

      this.layerManager.dataFeatureGroup.eachLayer(layer => {
        const FEATURENAME = get(layer, 'feature.properties.FEATURENAME', '')
        if (FEATURENAME === 'W_WELD_FIBER' || FEATURENAME === '熔接光纤') {
          // 根据X坐标判断左右侧
          const x = layer.getLatLng().lng
          if (x < mapCenter) {
            leftFiberLayers.push(layer)
          } else {
            rightFiberLayers.push(layer)
          }
        } else if (FEATURENAME === 'W_WELD_LINE' || FEATURENAME === '熔接连线') {
          lineLayers.push(layer)
        }
      })
      // 计算左右两侧光纤数量差
      const leftCount = leftFiberLayers.length - lineLayers.length
      const rightCount = rightFiberLayers.length - lineLayers.length

      // 取两侧中较小的数量作为最大可熔接数量
      this.maxBatchCount = Math.min(
        Math.max(0, leftCount),
        Math.max(0, rightCount)
      )

      if (this.maxBatchCount <= 0) {
        this.$message.warning('没有可熔接的光纤')
        return
      }

      this.batchCount = this.maxBatchCount
      this.batchDialogVisible = true
    },

    // 确认批量熔接
    async confirmBatchWeld() {
      try {
        const count = this.isBatchAll ? 0 : this.batchCount
        const params = {
          w_weld_line_id: this.selectedConnection.line.feature.properties.SMID,
          weldcount: count,
          userName: sessionStorage('userData').userName,
          baseinfoid: 1
        }

        const res = await createBatchWeldboxLinkLineApi(params)
        if (!res.success) {
          this.$message.error(res.message || '批量熔接失败')
          return
        }

        this.$message.success(`批量熔接完成`)
        this.batchDialogVisible = false
        this.$nextTick(async () => {
          // 重新加载视图
          await this.layerOnMapByFeatures()
        })
      } catch (error) {
        console.error('批量熔接失败:', error)
        this.$message.error('批量熔接失败')
      }
    },
    // 开始连线
    startDrawing() {
      this.isDrawingLine = true
      drawingPoints = []

      // 创建或更新通知
      if (!notifyInstance) {
        notifyInstance = this.$notify({
          title: '开始连线',
          message: '请点击要连接的光缆子管',
          duration: 0,
          showClose: true,
          type: 'info',
          onClose: () => {
            // 关闭通知时停止连线
            this.stopDrawing()
          }
        })
      } else {
        notifyInstance.message = '请点击要连接的光缆子管'
      }

      // 添加地图点击事件监听
      if (weldboxMapObj) {
        weldboxMapObj.on('click', this.handleMapClick)
        // 添加鼠标移动事件监听
        weldboxMapObj.on('mousemove', this.handleMouseMove)
      }
    },
    // 停止连线
    stopDrawing() {
      this.isDrawingLine = false
      drawingPoints = []
      // 移除临时连线
      if (tempLine && weldboxMapObj.hasLayer(tempLine)) {
        weldboxMapObj.removeLayer(tempLine)
      }
      tempLine = null
      // 移除地图点击事件监听
      if (weldboxMapObj) {
        weldboxMapObj.off('click', this.handleMapClick)
        weldboxMapObj.off('mousemove', this.handleMouseMove)
      }
      // 关闭通知，但不触发onClose回调以避免循环
      if (notifyInstance) {
        // 移除onClose回调以避免循环调用
        notifyInstance.onClose = null
        notifyInstance.close()
        notifyInstance = null
      }
    },
    // 处理鼠标移动事件
    handleMouseMove(e) {
      // 如果已经选择了第一个点，则更新临时连线
      if (drawingPoints.length === 1) {
        const firstPoint = drawingPoints[0].latlng
        const currentPoint = e.latlng
        // 如果临时线不存在，创建新的临时线
        if (!tempLine) {
          tempLine = L.polyline([firstPoint, currentPoint], {
            color: 'red',
            weight: 2,
            dashArray: '5, 5',  // 使用虚线样式
            opacity: 0.7,
            interactive: false
          }).addTo(weldboxMapObj)
        } else {
          // 如果临时线已存在，只更新其位置
          tempLine.setLatLngs([firstPoint, currentPoint])
        }
      }
    },
    handleMapClick(e) {
      // 如果在连线状态，但点击的不是熔接光纤，则不处理
      if (this.isDrawingLine) {
        this.showMessage('请选择熔接光纤')
        return
      }
      this.clearSelection()
    },
    async createConnection() {
      if (drawingPoints.length !== 2) return
      const [point1, point2] = drawingPoints
      // 获取左侧点的颜色
      const leftPoint = point1.latlng.lng < point2.latlng.lng ? point1 : point2
      const rightPoint = point1.latlng.lng > point2.latlng.lng ? point1 : point2
      const userData = sessionStorage('userData')
      const lproperties = get(leftPoint, 'layer.feature.properties')
      const rproperties = get(rightPoint, 'layer.feature.properties')
      const params = {
        rootid: 2,
        baseinfoid: 1,
        smid: this.featureData.properties.SMID,
        userName: userData.userName,
        beforefiberid: lproperties.SMID,
        afterfiberid: rproperties.SMID,
        brootid: lproperties.C_PRO_LINE_ROOT_ID,
        arootid: rproperties.C_PRO_LINE_ROOT_ID,
        boptlineid: lproperties.C_PRO_LINE_ID,
        aoptlineid: rproperties.C_PRO_LINE_ID,
        blinestructid: lproperties.C_PARA_LINESTRUCT_ID,
        alinestructid: rproperties.C_PARA_LINESTRUCT_ID
      }

      try {
        const creatRes = await createWeldboxLinkLineApi(params)
        if (!creatRes.success) {
          this.$message.error(creatRes.message || '连线保存失败，请重新连线保存！')
          return
        }
        this.$message.success('连线创建成功')
        // 重置状态
        drawingPoints = []
        tempLine = null
        if (notifyInstance) {
          notifyInstance.message = '连线完成，请继续选择要连接的光缆子管'
        }
        this.$nextTick(async() => {
          // 重新加载视图
          await this.layerOnMapByFeatures()
        })
      } catch (error) {
        console.error('保存连线失败:', error)
        this.$message.error('连线保存失败')
      }
    },
    // 选中连线
    selectConnection(line) {
      if (this.selectedConnection) {
        // 清除旧样式
        this.selectedConnection.line.setStyle({
          color: this.selectedConnection.color,
          weight: 2,
          opacity: 1
        })
      }

      const connection = connections.find(conn => conn.line === line)
      if (connection) {
        // 设置新样式 - 使用双线效果
        line.setStyle({
          color: connection.color,
          weight: 6,               // 外层线宽
          opacity: 0.3            // 外层线透明度
        })

        // 创建内层线条
        if (this.selectedInnerLine) {
          weldboxMapObj.removeLayer(this.selectedInnerLine)
        }
        this.selectedInnerLine = L.polyline(line.getLatLngs(), {
          color: connection.color,
          weight: 2,              // 内层线宽
          opacity: 1,             // 内层线不透明
          interactive: false      // 内层线不响应鼠标事件
        }).addTo(weldboxMapObj)

        this.selectedConnection = connection
      }
    },
    // 清除选中状态
    clearSelection() {
      if (this.selectedConnection) {
        this.selectedConnection.line.setStyle({
          color: this.selectedConnection.color,
          weight: 2,
          opacity: 1
        })

        if (this.selectedInnerLine) {
          weldboxMapObj.removeLayer(this.selectedInnerLine)
          this.selectedInnerLine = null
        }

        this.selectedConnection = null
      }
    },
    // 显示消息提示
    showMessage(message, type = 'warning') {
      if (messageInstance) {
        messageInstance.close()
      }
      messageInstance = this.$message({
        message,
        type,
        duration: 3000,
        onClose: () => {
          messageInstance = null
        }
      })
    }
  },

  beforeDestroy() {
    weldboxMapObj.off('moveend', this.afterMoveend)
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
    this.stopDrawing()
    if (weldboxMapObj) {
      // 清除所有连线
      connections.forEach(conn => {
        weldboxMapObj.removeLayer(conn.line)
      })
      if (this.selectedInnerLine) {
        weldboxMapObj.removeLayer(this.selectedInnerLine)
      }
      connections = []
      this.selectedConnection = null
      weldboxMapObj = null
    }
  }
}
</script>

<style lang="scss">
.weldbox-map-content {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;

  #weldbox-map {
    width: 100%;
    height: 100%;
    .leaflet-bottom.leaflet-right {
      display: none;
    }
  }

  .weldbox-info {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .info-item {
      margin-bottom: 10px;
      display: flex;  // 使用flex布局让标签和值更好对齐
      
      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #606266;
        margin-right: 10px;
        flex-shrink: 0;  // 防止标签文字被压缩
      }

      .value {
        color: var(--text-color-secondary);
        font-weight: 500;
        flex: 1;  // 值部分自适应剩余空间
      }
    }
  }
}

/* 添加选中线条的样式 */
:deep(.selected-line) {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  stroke-dasharray: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: all;
  cursor: pointer;
}

/* 批量连线弹框样式 */
.batch-weld-dialog {
  .el-dialog__body {
    padding: 20px;
  }
  .el-input-number {
    width: 100%;
  }
}
.weldbox-batch-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2000;
  cursor: move;
  
  .dialog-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-color-secondary);
    }
    
    i {
      cursor: pointer;
      color: var(--text-color-secondary);
      
      &:hover {
        color: #409EFF;
      }
    }
  }
  
  .dialog-body {
    padding: 20px;
  }
  
  .dialog-footer {
    padding: 10px 20px;
    border-top: 1px solid #ebeef5;
    text-align: right;
  }
}
</style>
